<template>
    <div class="form">
        <el-container class="container">
            <el-main class="form-main"></el-main>
            <el-aside class="form-aside">
                <div class="aside-box">
                    <el-alert :title="errMsg" v-if="errorShow" type="error" />
                    <div class="aside-box-content">
                        <div class="register">
                            <el-form size="large" label-position="right" label-width="100px" :model="formRegister"
                                style="max-width: 460px">
                                <el-form-item label="用户名">
                                    <el-input v-model="formRegister.admin_name" placeholder="请输入用户名" type="text" />
                                </el-form-item>
                                <el-form-item label="账号">
                                    <el-input v-model="formRegister.admin_email" placeholder="请输入邮箱" type="text" />
                                </el-form-item>
                                <el-form-item label="密码">
                                    <el-input v-model="formRegister.admin_password" placeholder="请输入密码"
                                        type="password" />
                                </el-form-item>
                                <el-form-item label="确认密码">
                                    <el-input v-model="formRegister.admin_password2" placeholder="请确认密码"
                                        type="password" />
                                </el-form-item>

                                <el-form-item>
                                    <el-button type="primary" @click="rregisterAdminFunc">用户注册</el-button>
                                    &nbsp;&nbsp;
                                    <el-link type="info" href="#/login">去登录</el-link>
                                </el-form-item>
                            </el-form>
                        </div>
                    </div>
                </div>
            </el-aside>
        </el-container>
    </div>
</template>
<style lang="scss">
@import '../../static/style/base.scss';
@import '../../static/style/form.scss';
.form {
    background-image: url(../../assets/bg.jpg) !important;
}
</style>
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { registerAdminApi } from '../../http/request'
import { ElNotification } from 'element-plus'
import { useRouter } from 'vue-router'
const $router = useRouter();
let errMsg = ref('默认')
let errorShow = ref(false)
const loading = ref(false)
const formRegister = reactive({ admin_email: '', admin_password: '', admin_password2: '', admin_name: '' })
const rregisterAdminFunc = () => {
    let { admin_email, admin_password, admin_password2, admin_name } = formRegister;
    if (admin_email.length == 0 || admin_password.length == 0) {
        errorShow.value = true;
        errMsg.value = '输入框不能为空';
        return;
    }
    if (admin_password != admin_password2) {
        errorShow.value = true;
        errMsg.value = '两次输入密码不一致';
        return;
    }
    loading.value = true;
    let timeout = setTimeout(() => {
        // 用户注册
        registerAdminApi({ admin_email, admin_password, admin_name })
            .then(
                (data: any) => {
                    if (data.code == 200) {
                        // 界面提示
                        ElNotification({ title: '提示', message: data.msg, type: 'success' })
                        // 跳转页面
                        $router.push({ path: '/login' })
                       
                    } else {
                        // 界面提示
                        ElNotification({ title: '提示', message: data.msg, type: 'error' })
                    }
                    loading.value = false;
                    errorShow.value = false;
                    clearTimeout(timeout);
                }
            )
    }, 300)
}
document.title = "管理员注册页面";
</script>
